<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue</title>
  <style>
    .loadingContainer {
      height: 100vh;
      width: 100vw;
      background-color: rgb(187, 55, 251);
      /* background-color: rgb(21, 21, 21); */

      padding-top: 200px;
      box-sizing: border-box;
    }

    * {
      margin: 0px;
      padding: 0px;
    }

    .progress {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }

    .progressitem {
      height: 20px;
      margin: 0 10px;
      width: 20px;
      border-radius: 50%;
      background-color: rgb(108, 3, 112);

    }
    .loadingWrap{
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="loadingContainer">
      <div class="loadingWrap">
        <img width="100" src="https://mp-d08e57ac-bfc6-460b-8732-05e71820dffa.cdn.bspapp.com/img/魔法球.png" alt="">
        <div class="progress">
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
  <script type="module" src="/src/main.js"></script>
  <script>
    window.onload = function () {
      let link = document.querySelector('link[rel="icon"]')
      let title = document.querySelector('title')
      title.innerHTML = 'ElegantUI'
      link.href = '/crystal.ico'
    }
    const progress = document.querySelector('.progress')
    let loadingtimer = setInterval(() => {
      // 每500ms往页面添加一个item  如果满了就全部清除

      //看一下父元素里面的数量
      const length = document.querySelectorAll('.progressitem').length;
      if (length >= 4) {
        // 清除所有
        progress.innerHTML = ''
      }
      const item = document.createElement('div')
      item.className = 'progressitem'
      progress.appendChild(item)
    }, 500)
  </script>
</body>

</html>